<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/js/axios.min.js"></script>
    <script>

    function checkUserName() {
        //向服务器发送Ajax的GET请求，第一个参数为URL路径，第二个参数为请求数据。
        axios.get("/user/checkName",{
            params:{//请求参数
                userName:$("name").value
            }
        }).then(resp =>{//处理响应信息，resp为响应对象
            var str = (resp.data)//得到响应信息的消息体内容
            if(str=="ok"){
                $("nameSpan").innerHTML ="该用户已存在";
                $("nameSpan").style.color="red";
            }else {
                $("nameSpan").innerHTML ="可以使用";
                $("nameSpan").style.color="green";
            }
        });
    }

    function $(id){
        return document.getElementById(id);
    }

    window.onload=function (){
        showData();
    }
    function showData() {
        axios.get("/user/getList").then(resp =>{
            //如果服务器发送的json字符串，会转化为json对象
            var info = resp.data;
            var str ="";
            info.forEach(n=>{
                str += `<tr><td>${n.id}</td><td>${n.name}</td><td>${n.birthday}</td></tr>`
            })
            $("data").innerHTML =str;
        })
    }

    </script>
</head>
<body>
    用户名:<input type="text" id="name" onblur="checkUserName()"><span id="nameSpan"></span> <br>
    电话:<input type="text" id="phone"><br>

            <table border="1" width="80%" cellspacing="0">
                <thead ><tr><th>编号</th><th>姓名</th><th>生日</th></tr></thead>
                <tbody id="data"></tbody>
            </table>
</body>
</html>